<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>webgl旋转</title>
    <script src="lib/webgl-debug.js"></script>
    <script src="lib/webgl-utils.js"></script>
    <script src="lib/cuon-utils.js"></script>
    <script src="lib/cuon-matrix.js"></script>
</head>

<body onload="main()">
    <canvas width="800" height="800" id="canvas"></canvas>
</body>

<script>
    var canvas;

    var vs = `
    attribute vec4 position;
    uniform float scale;
    void main(){
        gl_Position.x = position.x;
        gl_Position.y = position.y;
        gl_Position.z = position.z;
        gl_Position.w = 2.0;
    }

    `
    var fs = `
    void main(){
        gl_FragColor = vec4(1,0.5,0.5,1);
    }
    `


    function main() {
        canvas = document.getElementById("canvas");
        draw();
    }

    function draw() {
        if (!canvas) {
            console.log("无法找到画布")
            return;
        }

        // 获取上下文对象
        var gl = canvas.getContext("webgl");
        if (!gl) {
            console.log("当前浏览器不支持webgl");
            return;
        }

        if (!initShader(gl, vs, fs)) {
            console.log("初始化着色器失败");
            return;
        }

        var n = initVertex(gl);
        if (n < 0) {
            console.log("无法获取顶点相关数据");
            return;
        }

        var scale = gl.getUniformLocation(gl.program, "scal");
        gl.uniform1f(scale, 0.5);

        //清除颜色
        gl.clearColor(0, 0, 0, 1);
        // 清除指定缓冲区;
        gl.clear(gl.COLOR_BUFFER_BIT);
        // 绘制三角形，从第0个顶点开始，绘制n个顶点
        gl.drawArrays(gl.TRIANGLE_FAN, 0, n);

    }

    function initVertex(gl) {

        // 创建顶点位置数据
        var vertices = new Float32Array([-0.5, -0.5, -0.5, 0.5, 0.5, 0.5, 0.5, -0.5]);
        var n = 4;
        // 创建缓冲区
        var verteBuffer = gl.createBuffer();
        //将顶点与缓冲区绑定
        gl.bindBuffer(gl.ARRAY_BUFFER, verteBuffer);
        //想缓冲区写入数据
        gl.bufferData(gl.ARRAY_BUFFER, vertices, gl.STATIC_DRAW);
        //获取着色器属性储存位置
        var position = gl.getAttribLocation(gl.program, 'position');
        if (position < 0) {
            console.log("无法获取变量储存位置");
            return 0;
        }
        // 将缓冲区分配给指定变量
        gl.vertexAttribPointer(position, 2, gl.FLOAT, false, 0, 0);
        // 关闭缓冲区
        gl.enableVertexAttribArray(position);

        return n;

    }

    function initShader(gl, vs, fs) {
        //创建顶点着色器
        var vShader = loadShader(gl, gl.VERTEX_SHADER, vs);
        //创建片元着色器
        var fShader = loadShader(gl, gl.FRAGMENT_SHADER, fs);

        if (!vShader || !fShader) {
            return null;
        }
        //创建程序对象 program;
        var program = gl.createProgram();
        if (!program) {
            console.log("创建程序对象失败");
            return null;
        }
        //分配顶点着色器和片元着色器到 program
        gl.attachShader(program, vShader);
        gl.attachShader(program, fShader);

        //将着色器和程序连接
        gl.linkProgram(program);
        // 检查程序对象是否连接成功
        var linked = gl.getProgramParameter(program, gl.LINK_STATUS);
        if (!linked) {
            var error = gl.getProgramInfoLog(program);
            console.log("Failed to link program:" + error);
            //删除着色器
            gl.deleteProgram(program);
            gl.deleteShader(fShader);
            gl.deleteShader(vShader);
            return null;
        }
        //使用program
        gl.useProgram(program);
        gl.program = program;
        return program;
    }

    function loadShader(gl, type, source) {
        var shader = gl.createShader(type);
        if (!shader) {
            console.log("创建着色器失败" + type);
            return;
        }
        //引入着色器源代码
        gl.shaderSource(shader, source);
        //编译着色器
        gl.compileShader(shader);
        //获取编译状态
        var compiled = gl.getShaderParameter(shader, gl.COMPILE_STATUS);
        if (!compiled) {
            var error = gl.getShaderInfoLog(shader);
            console.log("编译着色器失败" + type + error);
            return null;
        }

        return shader;
    }
</script>


</html>